<template>
	<view class="carousel">
		<up-swiper
			height="668rpx"
			:current="currentSwiperIndex"
			:list="listData"
			@change="changeSwiper"
			indicatorStyle="left:24rpx; bottom: 50rpx"
		>
			<template #indicator>
				<view class="indicator-num">
					<text class="indicator-num__text">{{ currentSwiperIndex + 1 }}/{{ listData.length }}</text>
				</view>
			</template>
		</up-swiper>
	</view>
</template>
<script lang="ts" setup>
const props = defineProps({
	listData: {
		type: Array,
		default: () => [],
	},
})
// 轮播
const currentSwiperIndex = ref(0)
const changeSwiper = (e: any) => {
	if (e.source == "autoplay" || e.source == "touch") {
		currentSwiperIndex.value = e.current
	}
}
</script>
<style lang="scss" scoped>
.carousel {
	position: relative;
	.indicator-num {
		padding: 6rpx 14rpx;
		background: $c-black-_5;
		border-radius: 24px;
		display: flex;

		&__text {
			color: $c-white;
			font-size: 20rpx;
		}
	}
}
</style>
